<template>
  <div>
    <!-- 登录 Start -->
    <div v-show="!showRegisters">
      <el-form ref="loginForm" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" @keyup.enter.native="onClickConfirm" style="width: 244px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="form.code" placeholder="请输入验证码" @keyup.enter.native="onClickConfirm" style="width: 244px;" clearable></el-input>
          <el-button v-show="!countDown" style="color: var(--primaryColor);border: none;" @click="getSMSCodeByPhone">
            获取验证码
          </el-button>
          <el-button v-show="countDown" style="color: var(--primaryColor);border: none;">
            {{ countDown }}s
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="submit" style="" type="primary" @click="onClickConfirm">登录</el-button>
          <p @click="showRegisters = true" class="registers">首次登录请先完成账户注册>>></p>
        </el-form-item>
      </el-form>
      <!-- 第三方登录 -->
      <div class="other-login">
        <p style="margin-top: 100px;"></p>
        <el-divider>其他方式</el-divider>
        <a
          href="https://open.weixin.qq.com/connect/qrconnect?appid=wx300c5c2045683f30&redirect_uri=http://www.51mydoor.com&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect">
          <img title="微信" alt="微信"
            src="//sf6-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/wechat.e0ff124.svg"
            class="oauth-btn" style="margin-left: 47.5%;" />
        </a>
        <p style="text-align: center;font-size: 15px;color: #808080;">已完成注册但未绑定微信的用户请先使用手机号登录后绑定微信</p>
      </div>
    </div>
    <!-- 登录 end -->
    <!-- 前往注册 -->
    <StudentSignIn v-show="showRegisters"></StudentSignIn>
  </div>
</template>
<script>
import { request } from "@/util/request.js"
import StudentSignIn from "./StudentSignIn"
export default {
  inject: ['reload'],
  inheritAttrs: false,
  components: { StudentSignIn },
  data() {
    return {
      showRegisters: false, // 注册页
      submitLoading: false,
      countDown: '', // 倒计时展示
      form: {
        phone: undefined,
        code: undefined,
      },
      
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getSMSCodeByPhone() {
      this.$refs['loginForm'].validateField('phone', (errorMessage) => {
        if (errorMessage) {
          return this.$message.error(errorMessage);
        }
        const TIME_COUNT = 60
        request({
          method: 'POST',
          url: 'sysUser/yan',
          params: {
            phone: this.form.phone
          }
        }).then(res => {
          if (![null, 0].includes(res.code)) {
            return this.$message.error(res.msg);
          }
          if (!this.timer) {
            this.countDown = TIME_COUNT;
            this.timer = setInterval(() => {
              if (this.countDown > 0 && this.countDown <= TIME_COUNT) {
                this.countDown--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          this.$message.success(res.msg);
        })
      })
    },

    onClickConfirm() {
      this.$refs['loginForm'].validate(valid => {
        if (!valid) return
        this.submitLoading = true
        request({
					method: 'POST',
					url: 'sysUser/login',
					params: this.form
				}).then(res => {
          console.log(res);
          if (![0, 200].includes(res.code)) {
            return this.$message.error(res.msg)
          }
          this.$message.success({
            message: '登录成功！',
            duration: 2000
          });
          this.reload();
          sessionStorage.setItem(res.data.tokenInfo.tokenName, res.data.tokenInfo.tokenValue)
          sessionStorage.setItem('userId', res.data.user.userId)
          sessionStorage.setItem('user', JSON.stringify(res.data.user))
          this.$store.dispatch('login', res.data)
          this.$router.push({ name: 'Home' });
        }).finally(() => {
          this.submitLoading = false
        })
      })
    },

  }
}

</script>
<style lang="stylus" scoped>
.submit 
  width: 244px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
.registers 
  margin-top 29px
  font-size: 18px;
  font-weight: 400;
  color: #FC6621;
  line-height: 36px;
  cursor pointer
</style>
